Add Drawer Menu

  • Steps

    1.Add Drawer menu

    1. open lib/views/home_page.dart

    2. add 'drawer' parameter to the scaffold widget

    
                  drawer: Drawer(
    
                  ),
                  

    complete code

    
                   //lib/views/home_page.dart
    
                  class HomePage extends StatelessWidget {
                @override
                Widget build(BuildContext context) {
                  return GetBuilder<HomeController>(
                    builder: (controller) => Scaffold(
                      appBar: AppBar(
                        title: const Text('Home'),
                      ),
                      body: const Center(
                        child: Text('Hello World!'),
                      ),
                      drawer: Drawer(
    
                      ),
                    ),
                  );
                }
              }
              
    Output

    2. populate items to the drawer menu

    1. add ListView for scrollable row items

    
              drawer: Drawer(            
                child: ListView(
                  
                  
                ),
              ),
            
    We can use Column() widget instead of ListView()

    2. add children[] for adding multiple row items

    
            drawer: Drawer(        
              child: ListView(
                // Important: Remove any padding from the ListView.
               
                children: [
                 
                ],
              ),
            

    3. add items using ListTile()

    
            drawer: Drawer(
             
              child: ListView(
                // Important: Remove any padding from the ListView.
    
                children: [
    
                  ListTile(
                    title: const Text('Item 1'),
                    onTap: () {
                      // Update the state of the app.
                      // ...
                    },
                  ),
                  ListTile(
                    title: const Text('Item 2'),
                    onTap: () {
                      // Update the state of the app.
                      // ...
                    },
                  ),
                ],
              

    4. add drawer header

    
                  const DrawerHeader(
                    decoration: BoxDecoration(
                      color: Colors.blue,
                    ),
                    child: Text('Drawer Header'),
                  ),
                

    Complete code

    
                  //lib/views/home_page.dart
    
                  
    class HomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return GetBuilder<HomeController>(
          builder: (controller) => Scaffold(
            appBar: AppBar(
              title: const Text('Home'),
            ),
            body: const Center(
              child: Text('Hello World!'),
            ),
            drawer: Drawer(
             
              child: ListView(
                // Important: Remove any padding from the ListView.
                padding: EdgeInsets.zero,
                children: [
                  const DrawerHeader(
                    decoration: BoxDecoration(
                      color: Colors.blue,
                    ),
                    child: Text('Drawer Header'),
                  ),
                  ListTile(
                    title: const Text('Item 1'),
                    onTap: () {
                      // Update the state of the app.
                      // ...
                    },
                  ),
                  ListTile(
                    title: const Text('Item 2'),
                    onTap: () {
                      // Update the state of the app.
                      // ...
                    },
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }
    
    
    Output

  • Drawer Menu widget

    1. We need to use the same code of drawer menu in multiple view pages. So there is code duplication

    To avoid the code duplication of drawer menu , we can create widget and use whereever we want

    1. Widget

    Create lib/widgets/drawer.dart

    
                  //lib/widgets/drawer.dart
    
    
    
                  import 'package:flutter/material.dart';
                  import 'package:<package_name>/controllers/home_controller.dart';
                  import 'package:get/get.dart';
    
                  class NavDrawer extends StatelessWidget {
                    @override
                    Widget build(BuildContext context) {
                      return Container(
                        child: Drawer(
    
                          child: ListView(
                            // Important: Remove any padding from the ListView.
                            padding: EdgeInsets.zero,
                            children: [
                              const DrawerHeader(
                                decoration: BoxDecoration(
                                  color: Colors.blue,
                                ),
                                child: Text('Drawer Header'),
                              ),
                              ListTile(
                                title: const Text('Item 1'),
                                onTap: () {
                                  Get.offNamed('/home');
                                  // ...
                                },
                              ),
                              ListTile(
                                title: const Text('Item 2'),
                                onTap: () {
                                  Get.offNamed('/login');
                                },
                              ),
                            ],
                          ),
    
                        ),
                      );
                    }
                  }
    
    
    

    2. call the widget in the view page

    
      //lib/views/home_page.dart
      
      import 'package:<package_name>/widgets/drawer.dart';
                  
    class HomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return GetBuilder<HomeController>(
          builder: (controller) => Scaffold(
            appBar: AppBar(
              title: const Text('Home'),
            ),
            body: const Center(
              child: Text('Hello World!'),
            ),
            drawer:  NavDrawer()
          ),
        );
      }
    }
    
    
    drawer: NavDrawer()